<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>在线 Markdown 编辑器 - 学术助手</title>
  
  <!-- 外部CSS库 -->
  <script src="css/tailwindcss.js"></script>
  <link href="css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义CSS -->
  <link rel="stylesheet" href="css/style.css">
  
  <!-- Tailwind 配置 -->
  <script src="js/tailwind-config.js"></script>
  
  <!-- 共用导航栏组件 -->
  <script src="js/navbar.js"></script>
  
  <!-- Markdown 解析库 -->
  <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
  
  <!-- PDF 导出依赖 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  
  <style>
    /* 分屏拖拽样式 */
    .resizer {
      width: 8px;
      background: transparent;
      cursor: col-resize;
      transition: background 0.2s;
      position: relative;
      flex-shrink: 0;
      margin: 0 -4px;
      z-index: 10;
    }
    
    .resizer:hover {
      background: rgba(59, 130, 246, 0.1);
    }
    
    .resizer::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 4px;
      height: 60px;
      background: #9ca3af;
      border-radius: 2px;
      opacity: 0.5;
      transition: all 0.2s;
    }
    
    .resizer::after {
      content: '⋮';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #9ca3af;
      line-height: 1;
      opacity: 0.5;
      transition: all 0.2s;
    }
    
    .resizer:hover::before,
    .resizer.active::before {
      background: #3b82f6;
      opacity: 1;
    }
    
    .resizer:hover::after,
    .resizer.active::after {
      color: #3b82f6;
      opacity: 1;
    }
    
    .resizer.active {
      background: rgba(59, 130, 246, 0.2);
    }
    
    /* 预览区样式 */
    #preview-content {
      line-height: 1.8;
      color: #374151;
    }
    
    #preview-content h1,
    #preview-content h2,
    #preview-content h3,
    #preview-content h4,
    #preview-content h5,
    #preview-content h6 {
      font-weight: bold;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      color: #111827;
      border: none;
      outline: none;
      background: transparent;
    }
    
    #preview-content h1 {
      font-size: 2em;
      border-bottom: 2px solid #e5e7eb;
      padding-bottom: 0.3em;
      border-top: none;
      border-left: none;
      border-right: none;
    }
    
    #preview-content h2 {
      font-size: 1.5em;
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 0.3em;
      border-top: none;
      border-left: none;
      border-right: none;
    }
    
    #preview-content h3 {
      font-size: 1.25em;
      border: none;
    }
    
    #preview-content p {
      margin: 0.8em 0;
      border: none;
      outline: none;
      background: transparent;
      padding: 0;
    }
    
    #preview-content div {
      border: none;
      outline: none;
      background: transparent;
    }
    
    #preview-content code {
      background: #f3f4f6;
      padding: 0.2em 0.4em;
      border-radius: 3px;
      font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
      font-size: 0.9em;
      color: #e83e8c;
    }
    
    #preview-content pre {
      background: #1f2937;
      color: #f9fafb;
      padding: 1em;
      border-radius: 6px;
      overflow-x: auto;
      margin: 1em 0;
    }
    
    #preview-content pre code {
      background: transparent;
      padding: 0;
      color: #f9fafb;
    }
    
    #preview-content blockquote {
      border-left: 4px solid #3b82f6;
      padding-left: 1em;
      margin: 1em 0;
      color: #6b7280;
      background: transparent;
      padding: 0.5em 1em;
      border-top: none;
      border-right: none;
      border-bottom: none;
    }
    
    #preview-content table {
      border-collapse: collapse;
      width: 100%;
      margin: 1em 0;
    }
    
    #preview-content table th,
    #preview-content table td {
      border: 1px solid #000000;
      padding: 8px 10px;
      text-align: left;
      background: #ffffff;
    }
    
    #preview-content table th {
      background: #ffffff;
      font-weight: bold;
      text-align: center;
    }
    
    #preview-content ul,
    #preview-content ol {
      padding-left: 2em;
      margin: 1em 0;
      border: none;
      outline: none;
      background: transparent;
    }
    
    #preview-content li {
      margin: 0.5em 0;
      border: none;
      outline: none;
      background: transparent;
    }
    
    #preview-content a {
      color: #3b82f6;
      text-decoration: underline;
    }
    
    #preview-content a:hover {
      color: #2563eb;
    }
    
    #preview-content img {
      max-width: 100%;
      height: auto;
      border-radius: 6px;
      margin: 1em 0;
    }
    
    #preview-content hr {
      border: none;
      border-top: 2px solid #e5e7eb;
      margin: 2em 0;
    }
    
    #preview-content strong {
      font-weight: 700;
      color: #111827;
    }
    
    #preview-content em {
      font-style: italic;
    }
    
    /* 编辑器样式 */
    #markdown-input {
      font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
      tab-size: 2;
      color: #374151;
    }
    
    #markdown-input::placeholder {
      color: #9ca3af;
    }
    
    /* 移动端上下布局 */
    @media (max-width: 1024px) {
      .editor-container {
        flex-direction: column !important;
      }
      
      .resizer {
        width: 100%;
        height: 4px;
        cursor: row-resize;
      }
      
      .resizer::before {
        width: 100%;
        height: 2px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      
      .editor-panel {
        width: 100% !important;
        min-height: 500px !important;
      }
      
      .editor-panel textarea,
      .editor-panel #preview-content {
        height: 400px !important;
      }
      
      .resizer {
        width: 100%;
        height: 8px;
        margin: 12px 0;
        cursor: row-resize;
      }
      
      .resizer::before {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 4px;
      }
      
      .resizer::after {
        content: '⋯';
        font-size: 20px;
      }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-light to-gray-100 font-inter min-h-screen flex flex-col">
  
  <!-- 导航栏将通过 navbar.js 动态加载 -->

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    
    <!-- 页面标题 -->
    <div class="text-center mb-8" style="animation: fadeInUp 0.6s ease-out both;">
      <h2 class="text-4xl font-bold text-dark mb-3">
        在线 <span class="text-primary">Markdown 编辑器</span>
      </h2>
      <p class="text-gray-600 text-lg">
        实时预览、自动保存、支持复制和导出 Word 文档
      </p>
    </div>

    <!-- 使用说明 -->
    <div class="max-w-7xl mx-auto mb-6" style="animation: fadeInUp 0.6s ease-out 0.1s both;">
      <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
        <div class="flex items-start">
          <i class="fa fa-info-circle text-blue-500 text-xl mr-3 mt-1"></i>
          <div class="flex-1">
            <h3 class="font-semibold text-blue-900 mb-2">使用说明</h3>
            <p class="text-blue-800 text-sm leading-relaxed">
              1. 左侧输入 Markdown 语法，右侧实时预览效果；
              2. 内容自动保存到本地，刷新页面不丢失，快捷键 <kbd class="px-2 py-1 bg-white rounded border text-xs">Ctrl/Cmd + S</kbd> 手动保存；
              3. 可拖拽中间分割线调整左右宽度（移动端自动切换为上下布局），支持复制预览内容和导出 Word 格式，支持导入本地 Markdown 文件
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏的文件输入 -->
    <input type="file" id="file-input" accept=".md,.markdown,.txt" style="display: none;">

    <!-- 主编辑区 -->
    <div class="max-w-7xl mx-auto" style="animation: fadeInUp 0.6s ease-out 0.2s both;">
      <div class="editor-container flex gap-6" style="min-height: 600px;">
        
        <!-- 左侧：编辑区 -->
        <div class="editor-panel bg-white rounded-2xl shadow-soft p-6 flex flex-col" style="width: 50%;">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-gray-800 flex items-center">
              <i class="fa fa-edit text-blue-600 mr-2"></i>
              编辑区
            </h3>
            <div class="flex items-center space-x-2">
              <button 
                id="import-file" 
                class="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-all font-medium"
                title="导入 Markdown 文件"
              >
                <i class="fa fa-upload mr-1"></i>导入文件
              </button>
              <button 
                id="clear-editor" 
                class="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-all font-medium"
                title="清空编辑区"
              >
                <i class="fa fa-trash-o mr-1"></i>清空
              </button>
              <span class="text-xs text-gray-400 ml-2" id="save-status">
                <i class="fa fa-check-circle text-green-500 mr-1"></i>已保存
              </span>
            </div>
          </div>
          
          <textarea 
            id="markdown-input" 
            class="w-full h-[500px] p-4 border-2 border-gray-200 rounded-xl focus:border-primary focus:outline-none resize-none font-mono text-sm leading-relaxed"
            placeholder="# 欢迎使用 Markdown 编辑器&#10;&#10;## 基本语法&#10;&#10;**粗体文本**  *斜体文本*&#10;&#10;- 列表项 1&#10;- 列表项 2&#10;&#10;1. 有序列表 1&#10;2. 有序列表 2&#10;&#10;`代码` 或 &#60;代码块&#62;&#10;&#10;[链接文本](https://example.com)&#10;&#10;> 引用文本&#10;&#10;---&#10;&#10;### 快捷键&#10;- Ctrl/Cmd + S: 保存&#10;- 自动保存到本地存储"
          ></textarea>
          
          <div class="mt-4 flex items-center justify-between text-sm text-gray-500">
            <span>字符数: <span id="char-count" class="font-semibold text-gray-700">0</span></span>
            <span>行数: <span id="line-count" class="font-semibold text-gray-700">0</span></span>
          </div>
        </div>

        <!-- 分割线（可拖拽） -->
        <div class="resizer flex-shrink-0" id="resizer"></div>

        <!-- 右侧：预览区 -->
        <div class="editor-panel bg-white rounded-2xl shadow-soft p-6 flex flex-col" style="width: 50%;">
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-xl font-bold text-gray-800 flex items-center">
              <i class="fa fa-eye text-green-600 mr-2"></i>
              预览区
            </h3>
            <div class="flex items-center space-x-2">
              <button 
                id="copy-preview" 
                class="px-4 py-2 text-sm bg-gradient-to-r from-green-500 to-emerald-600 hover:shadow-lg text-white rounded-lg transition-all font-medium"
                title="复制预览内容"
              >
                <i class="fa fa-copy mr-1"></i>复制
              </button>
              <button 
                id="export-word" 
                class="px-4 py-2 text-sm bg-gradient-to-r from-blue-500 to-indigo-600 hover:shadow-lg text-white rounded-lg transition-all font-medium"
                title="导出为 Word"
              >
                <i class="fa fa-file-word-o mr-1"></i>导出 Word
              </button>
            </div>
          </div>
          
          <div 
            id="preview-content" 
            class="w-full h-[500px] p-4 bg-gray-50 border-2 border-gray-200 rounded-xl overflow-x-auto overflow-y-auto"
          >
            <div class="text-gray-400 text-center py-20">
              <i class="fa fa-arrow-left text-4xl mb-3"></i>
              <p>在左侧输入 Markdown 内容</p>
              <p>右侧会实时显示预览效果</p>
            </div>
          </div>
          
          <div class="mt-4 flex items-center justify-between text-sm">
            <span class="text-gray-500">预览内容</span>
          </div>
        </div>

      </div>
    </div>

    <!-- Markdown 语法速查 -->
    <div class="max-w-7xl mx-auto mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" style="animation: fadeInUp 0.6s ease-out 0.3s both;">
      <div class="bg-white rounded-xl p-4 shadow-soft">
        <h4 class="font-bold text-gray-800 mb-2 text-sm flex items-center">
          <i class="fa fa-heading text-blue-500 mr-2"></i>标题
        </h4>
        <code class="text-xs text-gray-600"># H1 ## H2 ### H3</code>
      </div>
      
      <div class="bg-white rounded-xl p-4 shadow-soft">
        <h4 class="font-bold text-gray-800 mb-2 text-sm flex items-center">
          <i class="fa fa-bold text-purple-500 mr-2"></i>强调
        </h4>
        <code class="text-xs text-gray-600">**粗体** *斜体*</code>
      </div>
      
      <div class="bg-white rounded-xl p-4 shadow-soft">
        <h4 class="font-bold text-gray-800 mb-2 text-sm flex items-center">
          <i class="fa fa-list text-green-500 mr-2"></i>列表
        </h4>
        <code class="text-xs text-gray-600">- 无序 1. 有序</code>
      </div>
      
      <div class="bg-white rounded-xl p-4 shadow-soft">
        <h4 class="font-bold text-gray-800 mb-2 text-sm flex items-center">
          <i class="fa fa-code text-orange-500 mr-2"></i>代码
        </h4>
        <code class="text-xs text-gray-600">`代码` ```代码块```</code>
      </div>
    </div>

  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-8 mt-12">
    <div class="container mx-auto px-4 text-center text-gray-600">
      <p class="mb-2">© 2024 学术助手 - 专注于学术资源与工具导航</p>
      <p class="text-sm">
        <a href="index.html" class="hover:text-primary transition-colors">返回首页</a>
        <span class="mx-2">|</span>
        <a href="tools.html" class="hover:text-primary transition-colors">论文工具</a>
        <span class="mx-2">|</span>
        <a href="#" class="hover:text-primary transition-colors">意见反馈</a>
      </p>
    </div>
  </footer>

  <!-- JavaScript -->
  <script src="js/markdown-editor.js"></script>
</body>
</html>

